import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import { CircleStateTitle } from "@/components/public/dotStateTitle/dotStateTitle";
import { CloseCircleOutlined, PlusOutlined, CloseOutlined } from "@ant-design/icons-vue";
import ChooseUser from "./popup/chooseUser";
import { defineComponent, ref, reactive, computed } from "vue";
import $roleUserService from "@/modules/permission/roleUser.service";
import useNavigator from "@/hooks/useNavigator";
import LPopup from "@/components/public/lPopup/lPopup";
import { Modal, message } from "ant-design-vue";
export default defineComponent({
  name: 'roleUserPage',
  setup() {
    const navigator = useNavigator();
    const addUserPopup = ref(null as any);
    const state = reactive({
      toolbar: {
        left: [
          "refresh",
          {
            el: () => (
              <a-button v-slots={{ icon: () => <PlusOutlined /> }} onClick={() => { addUserPopup.value.open() }}>添加用户</a-button>
            )
          },
          {
            el: () => (
              <a-button class="et-btn-danger" v-slots={{ icon: () => <CloseCircleOutlined /> }} onClick={() => { deleteRows(state.selectedRowKeys) }}>批量取消授权</a-button>
            )
          },
          {
            el: () => (
              <a-button class="et-btn-warning" v-slots={{ icon: () => <CloseOutlined /> }} onClick={() => { navigator.back() }}>关闭</a-button>
            )
          },
        ],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "工号",
          dataIndex: "work_userid",
          align: "center",
          width: "80px",
        },
        {
          title: "用户名称",
          dataIndex: "username",
          align: "center",
          width: "150px",
        },
        {
          title: "手机",
          dataIndex: "phone",
          align: "center",
          width: "150px",
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: "120px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "150px",
        },
      ],
      loading: false,
      query: {
        role_id: navigator.route?.query?.role_id || '',
      },
      searchForm: {
        work_userid: {
          type: "input",
          label: "工号",
          attrs: { placeholder: "工号" },
        },
        name: {
          type: "input",
          label: "用户名称",
          attrs: { placeholder: "用户名称" },
        },
        phone: {
          type: "input",
          label: "手机号码",
          attrs: { placeholder: "手机号码" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    const $service = new $roleUserService();
    const LTableRef = ref(null as any);
    const addConfirm = (rows: number[]) => {
      $service.add({
        role_id: state.query.role_id,
        admin_ids: rows?.length > 0 ? rows.join(',') : '',
      }).then(res => {
        message.success('添加成功!');
        LTableRef.value.$fetchTableData();
        addUserPopup.value.close();
      })
    }
    const deleteRows = (rows: number[]) => {
      Modal.confirm({
        title: '提示',
        content: '确认取消授权?',
        onOk: () => {
          $service.delete({
            role_id: state.query.role_id,
            admin_ids: rows?.length > 0 ? rows.join(',') : '',
          }).then(res => {
            message.success('取消授权成功!');
            LTableRef.value.$fetchTableData();
          })
        }
      })
    }
    return () => (
      <Page>
        <CardWithTitle title="分配用户">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        <a-button
                          size="small"
                          v-slots={{
                            icon: () => <CloseCircleOutlined />,
                          }}
                          onClick={() => { deleteRows([record.id]) }}
                        >
                          取消授权
                        </a-button>
                      </div>
                    );
                  }
                  if (column.dataIndex === "status") {
                    return (
                      Number(record.status) ? <CircleStateTitle title="正常" type="success" /> : <CircleStateTitle title="停用" type="danger" />
                    )
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <LPopup title="选择用户" ref={addUserPopup}>
          <ChooseUser onCancel={() => { addUserPopup.value.close() }} onConfirm={(e: number[]) => { addConfirm(e) }} />
        </LPopup>
      </Page>
    )
  },
})